<template>
  <div>
    <ul class="list">
      <li class="list-item" v-for="item in articleList" :key="item.id">
        <div class="top-box space-between">
          <div class="left-box">
            <router-link :to="{ path: is_draft ? '' : `/article-detail/${item.id}` }">
              <p v-if="is_search" v-html="highlightedTitle" class="title"></p>
              <p v-else class="title">{{ item.title }}</p>
            </router-link>
            <div v-if="is_search" v-html="highlightedIntro" class="content mellipsis"></div>
            <div v-else class="content mellipsis">{{ item.intro }}</div>
          </div>
          <img :src="item.cover_img" width="110" height="80" alt="" />
        </div>
        <div class="bottom-box display-flex" v-if="isHaveBottom">
          <p>{{ item.nikname }}</p>
          <p>
            <i class="iconfont icon-iconkuozhan_liulanpre"></i>
            <span>{{ item.hit_num }}</span>
          </p>
          <p>
            <i class="iconfont icon-dianzan"></i>
            <span>{{ item.like_num }}</span>
          </p>
          <p>
            <i class="iconfont icon-pinglun"></i>
            <span>{{ item.comment_num }}</span>
          </p>
        </div>
        <div class="placeholding-box" v-else></div>
        <div class="btns display-flex" v-if="isHaveBtns">
          <el-button size="small" circle title="编辑">
            <router-link :to="{ path: '/edit-article/' + item.id + '?is_draft=' + is_draft }">
              <i class="iconfont icon-bianji"></i>
            </router-link>
          </el-button>
          <el-button size="small" circle title="删除" @click="deleteArticle(item.id)">
            <i class="iconfont icon-shanchu"></i>
          </el-button>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { deleteOneArticle } from '@/api/article'
export default {
  name: 'ArticleList',
  props: {
    articleList: {
      type: Array,
      default: () => []
    },
    isHaveBtns: {
      type: Boolean,
      default: false
    },
    isHaveBottom: {
      type: Boolean,
      default: true
    },
    is_draft: {
      type: Boolean,
      default: false
    },
    keyword: {
      type: String,
      default: ''
    },
    is_search: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    highlightedTitle() {
      return this.highlightKeyword(this.articleList[0].title)
    },
    highlightedIntro() {
      return this.highlightKeyword(this.articleList[0].intro)
    }
  },
  methods: {
    // 关键字高亮
    highlightKeyword(value) {
      const keyword = this.keyword
      console.log(keyword)
      if (!keyword) {
        return value
      }
      // 创建一个不区分大小写的正则表达式
      const regex = new RegExp(keyword, 'gi')

      // 检查值中是否包含关键字
      if (regex.test(value)) {
        // 使用正则表达式替换关键字，并添加样式
        const highlighted = value.replace(
          regex,
          matched => `<em style="color: #e8001c; font-weight: 600;">${matched}</em>`
        )
        return highlighted
      } else {
        return value
      }
    },
    // 删除文章
    async deleteArticle(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await deleteOneArticle(id)
          this.$message({
            type: 'success',
            message: '删除成功!',
            offset: 80
          })
          this.$emit('getArticleList')
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
            offset: 80
          })
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.list {
  background-color: #fff;
}

.list-item {
  position: relative;
  padding: 20px;
  color: #4b587c;
  border-bottom: 1px solid #ccc;
  img {
    margin-left: 15px;
    border-radius: 5px;
  }
  .btns {
    position: absolute;
    bottom: 20px;
    right: 140px;
  }
}

::v-deep .el-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  color: #fff;
}

.iconfont {
  font-size: 12px;
  color: #fff;
}

::v-deep .el-button:hover {
  transform: scale(1.2);
}

::v-deep .el-button:nth-child(1) {
  background-color: black;
}

::v-deep .el-button:nth-child(2) {
  background-color: red;
}

.title {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  color: black;
}
.content {
  margin-top: 16px;
  font-size: 13px;
}
.bottom-box {
  margin-top: 20px;
  p {
    margin-right: 20px;
  }
  .iconfont {
    font-size: 12px;
    color: black;
  }
}
.placeholding-box {
  height: 30px;
}
</style>
